import { getChannels } from '@/store/actions/article';
import { Select } from 'antd';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

// 开发组件
// 满足受控组件的要求：value属性初始化，onChange控制属性变化.

export const Channel = ({ value, onChange, width = 264 }) => {
  // hooks
  const dispatch = useDispatch();

  // 读取redux中的频道数据
  const channels = useSelector((state) => state.article.channels);

  // 发起请求
  useEffect(() => {
    dispatch(getChannels());
  }, [dispatch]);

  return (
    <Select
      placeholder="请选择文章频道"
      value={value}
      onChange={onChange}
      style={{ width }}
    >
      {channels.map((item) => (
        <Select.Option key={item.id} value={item.id}>
          {item.name}
        </Select.Option>
      ))}
    </Select>
  );
};
